<template>
  <div class="login_page">
    <div class="logo">
      <img src="./assets/u2.png" alt="" />
      <span>进销存管理系统</span>
    </div>
    <div class="login_box">
      <span class="title">登录您的账户</span>
      <br /><br />
      <el-input
        v-model="ruleForm.username"
        placeholder="账户"
        clearable
        style="margin-bottom: 0"
        autocomplete="off"
      >
        <template #prefix>
          <el-icon>
            <UserFilled />
          </el-icon>
        </template>
      </el-input>
      <br />
      <el-input
        v-model="ruleForm.password"
        placeholder="密码"
        style="margin-bottom: 0"
        clearable
        show-password
        autocomplete="off"
      >
        <template #prefix>
          <el-icon>
            <Lock />
          </el-icon>
        </template>
      </el-input>
      <div class="log_tool">
        <el-checkbox v-model="checkAuto" label="自动登录" size="large" />
        <el-button text type="primary">忘记密码</el-button>
      </div>
      <el-button class="login_button" :loading="loginLoad" @click="logToHome"
        >登录
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useLoginState } from "../../store/modules/login.ts";
// 引入接口
import { login } from "../../api/login.ts";

const LoginState = useLoginState();
const router = useRouter();
const ruleForm = reactive({
  username: "",
  password: "",
});
const checkAuto = ref(false);
const loginLoad = ref(false);

const logToHome = () => {
  try {
    login(ruleForm).then((data) => {
      console.log(data);
      if (data.code === "200") {
        ElMessage({
          showClose: true,
          message: "登录成功",
          type: "success",
        });
        LoginState.setUserData(data.data);

        // window.localStorage.setItem(
        //   "dev-token",
        //   JSON.stringify(data.data.token)
        // );
        // router.replace({ path: "/home" });
      }
    });
  } catch (error) {
    ElMessage({
      showClose: true,
      message: "登录失败",
      type: "error",
    });
  }
};
/*
  ElMessage({
      showClose: true,
      message: '登录失败',
      type: 'error',
    })
*/
</script>
<style lang="less">
.login_page {
  position: relative;
  background-image: url("./assets/u81.jpg");
  background-size: 100% 100%;
  background-position: center;
  height: 100vh;

  /* 使用视口高度 */
  .logo {
    display: flex;
    align-items: center;
    position: absolute;
    left: 15px;
    top: 15px;
    cursor: default;

    img {
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }

    span {
      font-weight: 600;
      font-size: 19px;
    }
  }

  .span_s {
    position: absolute;
  }

  .login_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .login_box {
    width: 19%;
    height: 45%;
    position: absolute;
    top: 20%;
    right: 12%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 77px 55px;

    .title {
      width: 100%;
      display: flex;
      justify-content: flex-start;
    }

    .el-input {
      margin: 15px 0;
    }

    .log_tool {
      width: calc(100%);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-button {
        padding: 0;
      }
    }

    .login_button {
      width: 100%;
      background-color: #6860ff;
      color: #fff;
      margin-top: 10px;
    }
  }
}
</style>
